<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #mian{
        width:400px;
        height:500px;
        border: blue solid 2px;
        margin: auto;
    }
    #content{
        margin-left: 100px;
        margin-top: 30px;
    }
    .text{
        width: 200px;
        height: 100px;
    }
</style>
<body>
    <div id="mian">
        <div id="content">
          <form>
              <!--文本框-->
            <p>用户名:&nbsp;<input id="username" onblur="check()"></p> 
              <!--密码框-->
            <p>密&nbsp;码 :&nbsp; <input type="password"></p>
            <!--选择框-->
             <p>性别:
                <input type="radio" name="sex"> 男
                <input type="radio" name="sex" checked="checked"> 女 </p>
             <p>学 历: &nbsp; <select>
                <option>本科</option>
                 <option>专科</option>
            </select>
            </p> 
            <p>自我介绍：</p>
            <!--文本框-->
            <p> <textarea id="textcontent" class="text" cols="5" rows="3" ></textarea></p>
            <p><button onclick="showText()">提交</button></p>
         </form>
        </div>
   </div>
        <script>
            function check(){
                //获取用户框的值
                 var username= document.getElementById("username").value;
                if(username!="admin"){
                    alert("用户错误")
                }
            }
            function showText(){
                //获取文本框的里面文本的值
                var textcotent=document.getElementById("textcontent").value;
                alert(textcotent);
            }
        </script>
</body>
</html>